<template>
 <h2>父组件</h2>
 <button >按钮</button>
 <!-- <Child v-model:name="name" v-model:age="age"></Child> -->
 <!-- <p>{{ age }}</p> -->
  <Child ></Child>
  
</template>

<script setup >
import { provide, ref, useTemplateRef, watchEffect } from 'vue';
import Child from './Child.vue';
const name = ref("张三");
const age = ref(20);

const count = ref(0);
function setCount(newCount) {
    count.value = newCount;
}

// 提供数据
provide("name", name)
provide("age", age);

provide('count', {
    count, 
    setCount
})
// const name= ref('张奕');
// const age = ref(20);

// const count = ref(0);

// provide('count',count);
// const info =ref({
//     name:'张三',
//     age:20,
//     gender:'男'
// })

// provide('count',{
//     count,
//     changeCount
// });
// provide('info',info);

// function changeCount(temp){
//     count.value = temp;
// }

// const childEle = useTemplateRef('childEle');
// function fatherBtn(){
    // console.log(childEle.value);
    // childEle.value.ageAdd();
    // console.log(childEle.value.age);
// }
// watchEffect(()=>{
//      console.log(childEle.value);
//     // childEle.value?.ageAdd();
//     console.log(childEle.value?.age);
// })
</script>

<style scoped>

</style>